<template>
    <div class="g-layout-footer">
      © {{ new Date().getFullYear() }} {{ $t('common.companyInformation') }}
      <GLink class="ml-[16px]" underline to="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">{{ $t('common.recordInformation') }}-{{ recordInformationSuffix }}</GLink>
      <span>
        <img :src="publicSecurityImg" alt="public-security" class="public-security-img">
        <GLink class="ml-[4px]" underline :to="publicSecurityValue.url" rel="noreferrer" target="_blank">
        {{ $t(publicSecurityValue.name) }}
        </GLink>
      </span>
    </div>
</template>
<script lang='ts' setup>
import { RECORD_INFORMATION_SUFFIX_MAP } from '@/constant'
import { getDomain } from '@/utils/tools'
import publicSecurityImg from '@/assets/img/badge.png'

const recordInformationSuffix = RECORD_INFORMATION_SUFFIX_MAP[getDomain()]
const publicSecurityValue = getDomain() === 'atomgit.com' ?
  {
    name: 'common.publicSecurityAtomGit',
    url: 'https://beian.mps.gov.cn/#/query/webSearch?code=11010502058321'
  } 
  : {
    name: 'common.publicSecurity',
    url: 'https://beian.mps.gov.cn/#/query/webSearch?code=11010502055713'
  }
</script>
<style lang="scss" scoped>
.g-layout-footer {
  text-align: center;
  margin-bottom: 32px;
  margin-top: 32px;
  color: #9C9DB4;
  @media screen and (max-width: 768px) {
    margin-top: 16px;
    margin-bottom: 16px;
  }
}
.public-security-img {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-left: 16px;
  vertical-align: -0.125rem;
}
</style>